<template>
  <div class="wallpaper-toggle">
    <el-dropdown trigger="click" @command="handleWallpaperChange">
      <el-button :icon="Picture" circle size="large" title="切换壁纸">
      </el-button>
      <template #dropdown>
        <el-dropdown-menu class="wallpaper-menu">
          <div class="wallpaper-title">选择壁纸</div>
          
          <!-- 透明度设置 -->
          <div class="opacity-setting">
            <div class="opacity-label">透明度: {{ Math.round(opacity * 100) }}%</div>
            <el-slider 
              v-model="opacity" 
              :min="0.1" 
              :max="1" 
              :step="0.1"
              @change="handleOpacityChange"
              size="small"
            />
          </div>
          <el-dropdown-item command="none" :class="{ active: currentWallpaper === 'none' }">
            <div class="wallpaper-option">
              <div class="wallpaper-preview no-wallpaper">
                <span>无壁纸</span>
              </div>
              <span class="wallpaper-name">不设置</span>
            </div>
          </el-dropdown-item>
          <el-dropdown-item 
            v-for="wallpaper in wallpapers" 
            :key="wallpaper.name"
            :command="wallpaper.name"
            :class="{ active: currentWallpaper === wallpaper.name }"
          >
            <div class="wallpaper-option">
              <div class="wallpaper-preview">
                <img :src="wallpaper.url" :alt="wallpaper.name" />
              </div>
              <span class="wallpaper-name">{{ wallpaper.displayName }}</span>
            </div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { Picture } from '@element-plus/icons-vue'
import { useWallpaper } from '@/composables/useWallpaper'

// 使用壁纸composable
const { currentWallpaper, opacity, wallpapers, updateOpacity, updateWallpaper } = useWallpaper()

// 处理壁纸切换
const handleWallpaperChange = (command: string) => {
  updateWallpaper(command)
}

// 处理透明度变化
const handleOpacityChange = (value: number) => {
  updateOpacity(value)
}
</script>

<style scoped>
.wallpaper-toggle {
  display: flex;
  align-items: center;
}

.wallpaper-menu {
  width: 220px;
  max-height: 450px;
  overflow-y: auto;
}

.wallpaper-title {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--el-text-color-regular);
  font-weight: 500;
  border-bottom: 1px solid var(--el-border-color-light);
  margin-bottom: 8px;
}

.wallpaper-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.wallpaper-preview {
  width: 40px;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--el-border-color-light);
}

.wallpaper-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wallpaper-preview.no-wallpaper {
  background: var(--el-fill-color-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wallpaper-preview.no-wallpaper span {
  font-size: 10px;
  color: var(--el-text-color-regular);
}

.wallpaper-name {
  font-size: 14px;
  color: var(--el-text-color-primary);
  flex: 1;
}

:deep(.el-dropdown-menu__item.active) {
  background-color: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

:deep(.el-dropdown-menu__item) {
  padding: 8px 12px;
  line-height: 1.2;
}

/* 深色模式适配 */
.dark .wallpaper-preview.no-wallpaper {
  background: var(--el-fill-color);
}

.dark .wallpaper-title {
  border-bottom-color: var(--el-border-color);
}

/* 透明度设置样式 */
.opacity-setting {
  padding: 12px;
  border-bottom: 1px solid var(--el-border-color-light);
  margin-bottom: 8px;
}

.opacity-label {
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dark .opacity-setting {
  border-bottom-color: var(--el-border-color);
}

:deep(.el-slider) {
  margin: 0;
}

:deep(.el-slider__runway) {
  height: 4px;
}

:deep(.el-slider__button) {
  width: 14px;
  height: 14px;
}
</style>